<template>
  <div>

    <!-- 图书搜索 -->
    <BookCategory></BookCategory>
    <!-- 图书搜索结果 -->
    <span class="search-result-title">搜索"{{ searchText }}"结果</span>
    <hr />
    <el-row :gutter="20" class="book-section" v-if="searchResult.length !== 0">
      <el-col :span="6" v-for="(book) in searchResult" :key="book.bookId">
        <BookCard :book="book" @add-to-cart="handleAddToCart" @buy-now="handleBuyNow" />
      </el-col>
      <!-- 图书为空时显示 -->
    </el-row>

    <el-row v-else>
      <el-col :span="24">
        <el-empty description="没有搜索到相关图书" :image-size="270" />
      </el-col>
    </el-row>


    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size" :disabled="disabled"
      :background="background" layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
import BookCategory from "@/components/book/BookCategory.vue";
import BookCard from "@/components/book/BookCard.vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { watch } from "vue";
import { getSearchReasult } from "@/api/book";

const route = useRoute();
// 请求的搜索结果
const searchResult = ref([]);
const serchContent = ref({})
const searchText = ref(route.query.searchText || "");

const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(8);
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  // 逻辑实现
  console.log('每页条数改变为：', val);
};
const handleCurrentChange = (val) => {
  currentPage.value = val

};

onMounted(async () => {
  serchContent.value = {
    keyword: searchText.value,
    page: currentPage.value,
    pageSize: pageSize.value
  }
  await search(serchContent.value)
})

// 监听页数变化
watch(() => currentPage.value, async (newVal) => {
  // 页数变化时更新请求参数
  serchContent.value.page = newVal;
  console.log('serchContent.value.page:', serchContent.value)
  await search(serchContent.value)
}, { deep: true });

// 正确监听路由参数变化
watch(() => route.query, async (newQuery) => {
  // 搜索参数变化时更新输入框
  console.log('路由参数更新，newQuery同步为:', newQuery.searchText);
  serchContent.value.keyword = newQuery.searchText;
  searchText.value = newQuery.searchText;
  console.log('搜索框内容：:', serchContent.value)
  await search(serchContent.value)
}, { deep: true }
);

// 处理加入购物车事件
const handleAddToCart = (book) => {
  console.log('加入购物车:', book.title);
  alert('已添加到购物车:' + book.title)
  // 这里可以添加实际的加入购物车逻辑
}

// 处理购买事件
const handleBuyNow = (book) => {
  console.log('购买:', book.title);
  alert('已购买:' + book.title)
  // 这里可以添加实际的购买逻辑
}

const search = async (serchContent) => {
  // 请求搜索结果
  const res = await getSearchReasult(serchContent);
  total.value = res.data.data.total;
  console.log("搜索图书请求的结果：", res);
  if (res.data.data.records.length > 0) {
    searchResult.value = res.data.data.records;
  } else {
    searchResult.value = []
  }
}
</script>

<style scoped>
.search-result-title {
  color: #bebdbd;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>